<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Getter</title>
</head>

<body>
  <div>
    <h1>Vuex的getter类似于vue中的计算属性</h1>
    <p>Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，
      getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。</p>
    <p>没使用mapGetter</p>
    <p>{{ $store.getters.reverseMsg }}</p>
    <p>可使用mapGetter进行简化调用</p>
    <p>{{reverseMsg}}</p>
  </div>
  <script>
    import {
      mapGetters
    } from 'vuex'

    export default {
      ...mapGetters(['reverseMsg'])
    }
  </script>
  <script>
    //假设这是store.js文件
    export default new Vuex.Store({
      state: {
        count: 0,
        msg: 'Hello Vuex'
      },
      getters: {
        //定义一个方法,state是我们要处理的数据
        reverseMsg(state) {
          //内部要返一个处理完毕的结果,和计算属性一样
          return state.msg.split('').reverse().join('')
        }
      },
      mutations: {},
      actions: {},
      modules: {}
    })
  </script>
</body>

</html>